<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="CHARSET">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="/ZUi框架/dist/css/zui.css">
</head>
<body>
    <div id="app">
        <my-main></my-main>
    </div>

    <script src="/JS文件/vue.js"></script>
    <!-- <script scr="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <script>
        Vue.component("my-main",{
            template:` 
            <div class="container">
            <table class="table table-bordered text-center" border="1">
                <thead>
                    <tr>
                        <th class="text-center">编号</th>
                        <th class="text-center">名称</th>
                        <th class="text-center">单价</th>
                        <th class="text-center">数量</th>
                        <th class="text-center">总价</th>
                    </tr>
                </thead>
                <my-tr v-bind:arrs="list"></my-tr>
            </table>
        </div>`,
            data(){
                return {
                    list:[
                        {pname:"huawei",price:3,count:2,sub:6,istrue:"true"},
                        {pname:"xiaomi",price:4,count:3,sub:1,istrue:"true"},
                        {pname:"apple",price:5,count:4,sub:20,istrue:"true"}
                    ]
                }
            }
        })
        Vue.component("my-tr",{
            props:['arrs'],
            template:`
            <tbody>
            <tr v-for="(value,index) in arrs" v-show="value.istrue"> 
            <td>{{index+1}}</td>
            <td>{{value.pname}}</td>
            <td>{{value.price}}</td>
            <td> 
            <button @click="add(index)">+</button>
            <span>{{value.count}}</span>
            <button @click="redu(index)">-</button>
            </td>
            <td @click="show(index)"><img src="./img/垃圾箱.png"/></td>
            </tr>
            <tr>
                <td colspan="5">总价：￥{{sum}}</td>
            </tr>
           </tbody>`,
            data(){
                return{
                    sum:38,
                   
                }
            },
            methods:{
                add:function(ind){
                    // 数量
                this.arrs[ind].count++;
                this.arrs[ind].sub=this.arrs[ind].count*this.arrs[ind].price;
                this.total();
                },
           
            redu:function(ind){
                if(this.arrs[ind].count>0){
                    this.arrs[ind].count--;
                }
                this.arrs[ind].sub=this.arrs[ind].count*this.arrs[ind].price
                this.total();
            },
            show:function(ind){
                this.arrs[ind].istrue=!this.arrs[ind].istrue;
                if(  this.arrs[ind].istrue==false){
                    this.arrs[ind].sub=0;
                }
                this.total();
            },
            total:function(){
                for(var i=0,tota=0;i<this.arrs.length;i++){
                    tota+=this.arrs[i].sub;
                }
                this.sum=tota
            
            }
            
        }
        })
        new Vue({
            el:"#app"
        })
    </script>
</body>
</html>